<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>会员管理</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <%@include file="../include/commonFile.jsp" %>
    <style type="text/css">
        .layui-table-view .layui-table[lay-size=sm] .layui-table-cell {
            height: 30px;
            line-height: 30px;
        }
        #view table th, #view table td{
            padding: 9px 10px!important;
        }

        .header-bar .bar-info {
            /*display: block*/
        }
        .header-bar-info {
            line-height: 30px;
            text-align: center;
        }
        .bar-info {
            position: fixed;
            width: 100%;
            z-index: 99999;
            background: #fff;
            top: 30px;
            text-align: center;
            display: none;
        }
        .bar-info-hidden {
            position: fixed;
            /*left: 43px;*/
            width: 5%;
            /*top: 0;*/
            display: block !important;
            border-left: none;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            overflow: hidden;
            -webkit-box-shadow: 5px 0 20px 2px #ddd;
            box-shadow: 5px 0 20px 2px #ddd
        }
        .bar-info-nav  {
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .bar-info-nav li {
            line-height: 26px;
            border-bottom: 1px solid #ccc;
        }

    </style>
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">

            <div class="layui-tab layui-tab-brief" lay-filter="mem">
                <ul class="layui-tab-title">
                    <c:forEach items="${types}" var="type">
                        <li ${input.type == type.key ? 'class="layui-this"':''}
                                data-type="${type.key}">${type.value}</li>
                    </c:forEach>
                </ul>
                <div class="layui-tab-content">
                    <form class="layui-form" action="${ctx}/member/membermgmt/list.do" id="myForm" method="post">
                        <input type="hidden" name="type" id="type" value="${input.type}"/>
                        <%--<input type="hidden" name="pageNo" id="pageNo"/>--%>
                        <input type="hidden" name="partnerId" value="${partnerId}"/>
                        <input type="hidden" name="pageNo" id="pageNo" value="${page.page}"/>
                        <div class="f-search-bar">
                            <div class="search-container">
                                <ul class="search-form-content">
                                    <li class="form-item-inline">
                                        <label class="search-form-lable">昵称</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="nickName" id="nickName" autocomplete="off" class="layui-input"
                                                   value="${input.nickName}" placeholder="请输入查询昵称">
                                        </div>
                                    </li>
                                    <li class="form-item-inline">
                                        <label class="search-form-lable">手机号</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="mobile" id="mobile" autocomplete="off" class="layui-input"
                                                   value="${input.mobile}" placeholder="请输入查询手机号">
                                        </div>
                                    </li>
                                    <c:if test="${isChild == false || isXzgsAdmin}">
                                        <li class="form-item-inline">
                                            <label class="search-form-lable">所属机构</label>
                                            <div class="layui-input-inline">
                                                <select name="memberGroupId" id="memberGroupId" lay-search lay-filter="memberGroupId">
                                                    <option value="">全部</option>
                                                    <c:forEach var="memberGroup" items="${memberGroupList}">
                                                        <option value="${memberGroup.id}" ${input.memberGroupId == memberGroup.id ? 'selected="selected"' : ''}>${memberGroup.realname}</option>
                                                    </c:forEach>
                                                </select>
                                            </div>
                                        </li>
                                    </c:if>
                                    <li class="form-item-inline">
                                        <label class="search-form-lable">性别</label>
                                        <div class="layui-input-inline">
                                            <select name="sex" id="sex">
                                                <option value=""
                                                        <c:if test="${input.sex == null}">selected=selected</c:if>>全部
                                                </option>
                                                <option value="0"
                                                        <c:if test="${input.sex == 0}">selected=selected</c:if>>女
                                                </option>
                                                <option value="1"
                                                        <c:if test="${input.sex == 1}">selected=selected</c:if>>男
                                                </option>
                                            </select>
                                        </div>
                                    </li>
                                </ul>
                                <ul class="search-form-content">
                                    <li class="form-item-inline">
                                        <label class="search-form-lable">编号</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="userSerial" id="userSerial" autocomplete="off"
                                                   class="layui-input"
                                                   value="${input.userSerial}" placeholder="请输入会员编号">
                                        </div>
                                    </li>
                                    <c:if test="${fn:length(titles) > 0}">
                                        <li>
                                            <label class="search-form-lable">过滤条件</label>
                                            <div class="layui-input-inline" style="width: 100px">
                                                <select name="fieldTitle" id="fieldTitle" lay-search lay-filter="fieldTitle">
                                                    <option value="">全部</option>
                                                    <c:forEach var="title" items="${input.titles}">
                                                        <option value="${title}" ${input.fieldTitle == title ? 'selected="selected"' : ''}>${title}</option>
                                                    </c:forEach>
                                                </select>
                                            </div>
                                            <div class="layui-input-inline">
                                                <input type="text" name="fieldValue" id="fieldValue"
                                                       autocomplete="off" class="layui-input" style="width: 165px"
                                                       value="${input.fieldValue}" placeholder="条件值">
                                            </div>
                                        </li>
                                    </c:if>
                                        <li class="form-item-inline">
                                            <label class="search-form-lable">地区</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="area" id="area" autocomplete="off"
                                                       class="layui-input" style="width: 195px"
                                                       value="${input.area}" placeholder="请输入查询地区">
                                            </div>
                                        </li>
                                </ul>
                                <ul class="search-form-content">
                                    <li class="form-item"><label class="search-form-lable">加入时间</label>
                                        <div class="check-btn-inner">
                                            <a id="all" href="javascript:void(0);"
                                               onclick="mainApp.setTimeType($(this),0,'#myForm')" ${empty input.timeType || input.timeType == 0 ? 'class="active"' : ''}>全部</a>
                                            <a href="javascript:void(0);" id="today"
                                               onclick="mainApp.setTimeType($(this),1,'#myForm')" ${input.timeType == 1 ? 'class="active"' : ''}>今天</a>
                                            <a href="javascript:void(0);" id="week"
                                               onclick="mainApp.setTimeType($(this),2,'#myForm')" ${input.timeType == 2 ? 'class="active"' : ''}>本周内</a>
                                            <a href="javascript:void(0);" id="month"
                                               onclick="mainApp.setTimeType($(this),3,'#myForm')" ${input.timeType == 3 ? 'class="active"' : ''}>本月内</a>
                                            <input type="hidden" id="timeType" name="timeType" value="${input.timeType}"/>
                                        </div>
                                        <div class="layui-inline">
                                            <div class="layui-input-inline">
                                                <input class="layui-input" type="text" name="createStart" id="createStart"
                                                       value="${empty input.createStart ? '' : fn:substring(input.createStart, 0, 10)}"
                                                       placeholder="开始日">
                                            </div>
                                            -
                                            <div class="layui-input-inline">
                                                <input class="layui-input" type="text" name="createEnd" id="createEnd"
                                                       value="${empty input.createEnd ? '' : fn:substring(input.createEnd, 0, 10)}"
                                                       placeholder="截止日">
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-item-inline">
                                        <div class="sub-btns">
                                            <c:if test="${input.type == 0 && isCommune && isChild == false}">
                                                <a class="layui-btn layui-btn-danger" id="custom"
                                                   href="${ctx}/member/membermgmt/xzgs/customFrom.do?projectBy=${projectBy}">
                                                    显示设置
                                                </a>
                                            </c:if>
                                            <a class="layui-btn layui-btn-danger"
                                               href="javascript:txz.expireCheck('', function() { exportExcelData() })">导出EXCEL</a>
                                            <a class="layui-btn layui-btn-danger"
                                               href="javascript:mainApp.reloadTable()">查询</a>
                                            <a class="layui-btn layui-btn-normal"
                                               href="javascript:resetFunction('#myForm')">重置</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>

                    <table class="layui-table" id="membermgmt_table" lay-filter="membermgmt_table"></table>
                    <div class="my-act-list-content">
                        <ul id="view">
                        </ul>
                    </div>
                    <div id="page_content" class="page-container"></div>
                </div>
            </div>
        </div><!--底部-->
        <%@include file="../include/footer.jsp" %>
    </section>

</div>

<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript" src="${ctx}/script/common/table_option.js"></script>
<script type="text/html" id="membermgmtBar">

    <div class="header-bar-info">
        <div>
            {{#  if(d.checkStatus == '审核通过'){ }}
            <a href="${ctx}/member/membermgmt/xzgs/details.do?pmId={{d.pmId}}&pageNo=${page.page}">
                详情
            </a>
            <a href="${ctx}/member/membermgmt/xzgs/form.do?pmId={{d.pmId}}&pageNo=${page.page}">
                编辑
            </a>
            <c:if test="${hasProject}">
                <a  class="green"
                    href="${ctx}/member/membermgmt/xzgs/customUpdateForm.do?memberId={{d.memberId}}&projectId=${projectId}&pageNo=${page.page}">
                    其他信息
                </a>
            </c:if>
            <%--<a class="more-btn" href="#">--%>
                    <%--<span>--%>
                        <%--<i class="more iconfont icon-unfold"></i>--%>
                    <%--</span>--%>
            <%--</a>--%>
            {{#  } }}
            {{#  if(d.checkStatus == '待审核'){ }}
                <a href="javascript:checkMember('{{d.pmId}}','1')"
                   class="green" target="_self">通过</a>
                <a href="javascript:checkMember('{{d.pmId}}','2')"
                   class="red" target="_self">拒绝</a>
                <a target="_self" class=""
                   href="javascript:openDialogShow('查看推荐人','${ctx}/system/member/recommendMemberView.do?pmId={{d.pmId}}','400px','470px')">
                    推荐人
                </a>
            {{#  } }}
        </div>
    </div>
    <div class="bar-info">
        <ul class="bar-info-nav">
            {{#  if(d.checkStatus == '审核通过'){ }}
            <%--<li>--%>
                <%--<a class="green"--%>
                   <%--href="${ctx}/member/integral/userIntegral/list.do?pmId={{d.pmId}}">--%>
                    <%--积分--%>
                <%--</a>--%>
            <%--</li>--%>
            <%--<li>--%>
                <%--<a class="green"--%>
                   <%--href="${ctx}/member/integral/userIntegral/recommendPersonList.do?pmId={{d.pmId}}">--%>
                    <%--推荐的人--%>
                <%--</a>--%>
            <%--</li>--%>
            <%--<li>--%>
                <%--<a class="qr-btn" href="javascript:txz.openQrDialog({--%>
                                                            <%--title:'扫码二维码可预览分享',--%>
                                                            <%--detailList:[{--%>
                                                                <%--title:'个人名片二维码',--%>
                                                                <%--url:'{{d.qrCodeUrl}}',--%>
                                                                <%--link:''--%>
                                                            <%--}]--%>
                                                        <%--})">--%>
                    <%--二维码--%>
                <%--</a>--%>
            <%--</li>--%>
            <%--<li>--%>
                <%--<a target="_self" class=""--%>
                   <%--href="javascript:openDialog(' {{d.nickName}} 的推荐人','${ctx}/member/membermgmt/xzgs/bindingRRView.do?memberId={{d.memberId}}',--%>
                                                            <%--'550px','500px')">--%>
                    <%--推荐关系--%>
                <%--</a>--%>
            <%--</li>--%>
            <c:if test="${isChild == false}">
                <%--<li>--%>
                    <%--<a target="_self" class=""--%>
                       <%--href="javascript:openDialog('更改所属','${ctx}/member/membermgmt/xzgs/setTag.do?memberId={{d.memberId}}&partnerId={{d.partnerId}}',--%>
                                                            <%--'700px','600px')">--%>
                        <%--分配分社--%>
                    <%--</a>--%>
                <%--</li>--%>
            </c:if>
            <%--<c:if test="${hasProject}">--%>
                <%--<li>--%>
                    <%--<a  class="green"--%>
                        <%--href="${ctx}/member/membermgmt/xzgs/customUpdateForm.do?memberId={{d.memberId}}&projectId=${projectId}">--%>
                        <%--其他信息--%>
                    <%--</a>--%>
                <%--</li>--%>
            <%--</c:if>--%>
            {{#  } }}
        </ul>
    </div>

</script>
<script type="text/javascript">

    var form,laytpl,laypage,element,laytable,layfrom,loadingIndex,membermgmtT;
    var titles;
    <c:if test="${input.type == 0 && not empty titles}">
        titles = JSON.parse(JSON.stringify(${titles}));
    </c:if>
    $(function () {

        layui.use(['laydate', 'form'], function () {
            var laydate = layui.laydate;
            form = layui.form;
            // 查询发布日期
            var start = {
                elem: 'input[name=createStart]'
            };

            var end = {
                elem: 'input[name=createEnd]'
            };
            laydate.render(start);
            laydate.render(end);

            form.on('select(accountIds)', function (data) {
                var partnerId = data.value
                $("#accountIds").html("");
                loadAccountData(partnerId, "");
            });
        });


        layui.use(['laytpl', 'laypage', 'element', 'table', 'form'], function () {
            laytpl = layui.laytpl;
            laypage = layui.laypage;
            element = layui.element;
            laytable = layui.table;
            layfrom = layui.form;
            element.on('tab(mem)', function (data) {
                if (data.index == 0) { //会员管理
                    window.location.href =
                        "${ctx}/member/membermgmt/list.do?type=0";
                } else if (data.index == 1) {//用户管理
                    window.location.href =
                        "${ctx}/member/membermgmt/list.do?type=1";
                }
            });

            // 初始化table
            var opts = {
                id: 'membermgmt_table'
                , elem: '#membermgmt_table'
                , url: '${ctx}/member/membermgmt/xzgs/api/list.do' //数据接口
                , method: 'post'
                , limit: '10'
                , skin: '1'
                , where : {
                    type: '${input.type}',
                    pageNo: $('#pageNo').val(),
                    nickName: $('#nickName').val(),
                    mobile: $('#mobile').val(),
                    area: $('#area').val(),
                    fieldValue: $('#fieldValue').val(),
                    fieldTitle: $('#fieldTitle option:selected').val(),
                    memberGroupId: $('#memberGroupId option:selected').val(),
                    sex: $('#sex option:selected').val(),
                    timeType: $('#timeType').val(),
                    createEnd: $('#createEnd').val(),
                    createStart: $('#createStart').val(),
                    userSerial: $('#userSerial').val(),
                },
                request: {
                    pageName: 'pageNo' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                // , page: {
                //     theme: '#e8473f'
                // } //开启分页
                , size: 'sm' //小尺寸的表格
                ,done: function (response) {
                    layer.close(loadingIndex);
                    $('#totalCount').html(response.count);
                    //加载分页
                    loadPageNew({
                        elem: 'page_content',
                        totalCount: response.page.totalCount,
                        limit: response.page.limit,
                        page: response.page.page
                    });

                    // $(".header-bar-info").parent().addClass("header-bar")
                    // $(".header-bar-info").parent().removeClass("layui-table-cell")
                    //
                    // $('.header-bar').mouseover(function (e) {
                    //     $(this).find('.bar-info').addClass('bar-info-hidden').css('top', $(this).offset().top+30)
                    // });
                    //
                    // $('.header-bar').mouseleave(function (e) {
                    //     $(this).find('.bar-info').removeClass('bar-info-hidden')
                    // });


                }
                , cols: [[ //表头
                    {
                        field: 'num',
                        title: '序号',
                        align:'center',
                        width: 60,
                        fixed: 'left',
                        templet: '<div>{{${page.limit * (page.page-1)} +d.LAY_INDEX}}</div>'
                    },
                    {
                        field: 'userSerial',
                        title: '编号',
                        align:'center',
                        width: 75,
                        fixed: 'left',
                    },
                    {
                        field: 'nickName',
                        title: '姓名',
                        width: 120,
                        align:'center',
                        fixed: 'left',
                        templet: '<div><div class="member-cell" onclick="openDialogShow(\'用户名片\',\'${ctx}/system/member/memberView.do?id={{d.memberId}}\',\'400px\',\'470px\')">\n' +
                            '     <img class="member-logo-img" src="{{ d.logo }}?imageMogr2/auto-orient/crop/126x126" onerror=null;src=\'${ctx}/image/def_user_logo.png\' />' +
                            '     <div class="member-name ellipsis-1">' +
                            '       <a title="{{d.nickName}}" href="javascript:void(0);">{{d.nickName}}</a>\n' +
                            '     </div>\n' +
                            ' </div></div>'
                    },
                    {
                        field: 'sex',
                        title: '性别',
                        width: 60,
                        fixed: 'left',
                    },
                    {
                        field: 'company',
                        title: '公司',
                        width: 100,
                        align:'center',
                        fixed: 'left',
                    },
                    <c:if test="${input.type == 0 || input.type == null}">
                        {
                            title: '操作',
                            width: 124,
                            fixed: 'left',
                            align:'center',
                            toolbar: '#membermgmtBar'
                        }
                    </c:if>
                ]]
            }
            <c:if test="${input.type == 1}">
                opts.cols[0].push({
                    field: 'realname',
                    title: '所属机构',
                    align: 'center',
                    width: 1227,
                })
            </c:if>
            <c:if test="${input.type == 0 || input.type == null}">
                opts.cols[0].push({
                    field: 'job',
                    title: '职位',
                    align: 'center',
                    width: 100,

                })
                opts.cols[0].push({
                    field: 'area',
                    title: '城市',
                    align: 'center',
                    width: 100,

                })
                opts.cols[0].push({
                    field: 'createTime',
                    title: '加入时间',
                    align: 'center',
                    width: 150,

                })
                opts.cols[0].push({
                    field: 'lastJoinActTime',
                    title: '最近参与活动时间',
                    align: 'center',
                    width: 150,

                })
                opts.cols[0].push({
                    field: 'realname',
                    title: '分社名',
                    align: 'center',
                    width: 80,
                })
                opts.cols[0].push({
                    field: 'leagueJob',
                    title: '分社职位',
                    align: 'center',
                    width: 80,

                })
                opts.cols[0].push({
                    field: 'memberActionForce',
                    title: '个人行动力',
                    align: 'center',
                    width: 90,

                })
                opts.cols[0].push({
                    field: 'memberInfluenceForce',
                    title: '个人影响力',
                    align: 'center',
                    width: 90,

                })
                opts.cols[0].push({
                    field: 'outdoorIntegral',
                    title: '户外',
                    align: 'center',
                    width: 70,

                })
                opts.cols[0].push({
                    field: 'publicWelfareIntegral',
                    title: '公益',
                    align: 'center',
                    width: 70,

                })
                opts.cols[0].push({
                    field: 'devoteIntegral',
                    title: '贡献',
                    align: 'center',
                    width: 70,

                })
                opts.cols[0].push({
                    field: 'studyIntegral',
                    title: '学习',
                    align: 'center',
                    width: 70,

                })
                opts.cols[0].push({
                    field: 'memRecommends',
                    title: '推荐次数',
                    align: 'center',
                    width: 80,

                })
                opts.cols[0].push({
                    field: 'date-' + 0,
                    title: "实力",
                    align: 'center',
                    width: 70,
                    templet: '<div>{{d.customField[\'' + "实力" + '\'] == null ? \'\':d.customField[\'' + "实力" + '\']}}</div>'
                })
                opts.cols[0].push({
                    field: 'date-' + 1,
                    title: "戈壁",
                    align: 'center',
                    width: 70,
                    templet: '<div>{{d.customField[\'' + "戈壁" + '\'] == null ? \'\':d.customField[\'' + "戈壁" + '\']}}</div>'
                })
                opts.cols[0].push({
                    field: 'date-' + 2,
                    title: "意愿",
                    align: 'center',
                    width: 70,
                    templet: '<div>{{d.customField[\'' + "需求" + '\'] == null ? \'\':d.customField[\'' + "需求" + '\']}}</div>'
                })
                </c:if>


            <c:if test="${input.type == 0 && not empty titles}">
            // for (var i = 0; i < titles.length; i++) {
            //     opts.cols[0].push({
            //         field: 'date-' + i, title: titles[i], width: 70,
            //         templet: '<div>{{d.customField[\'' + titles[i] + '\'] == null ? \'\':d.customField[\'' + titles[i] + '\']}}</div>'
            //     })
            // }
            </c:if>

            membermgmtT = laytable.render(opts);
        });
        mainApp = {
            reloadTable: function () {
                loadingIndex = layer.load(1);
                $('#pageNo').val(1)
                submitFunction("#myForm")
            },
            setTimeType: function(obj, value, myForm) {
                $(obj).parent(".check-btn-inner").find("a").removeClass("active");
                $(obj).addClass("active");
                $(obj).parent(".check-btn-inner").find("[type=hidden]").val(value);
                $(myForm).find("[name=createStart]").val("");
                $(myForm).find("[name=createEnd]").val("");

                $('#pageNo').val(1)
                $(myForm).submit();
            },
        }

    })


    function exportExcelData() {
        layer.confirm('确认要导出Excel吗?', {
            icon: 3,
            title: '系统提示'
        }, function (index) {
            var url = "${ctx}/member/membermgmt/xzgs/listExport.do";
            var loadIndex = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
            $.post(url, $("#myForm").serialize(), function (res) {
                top.layer.close(loadIndex);
                if (res.success) {
                    window.location.href = res.data;
                } else {
                    util.layerMsgError(res.description)
                }
            });
            top.layer.close(index);
        });
    }

    function openDialog(title, url, width, height, target) {
        layer.open({
            type: 2,
            area: [width, height],
            title: title,
            maxmin: true, //开启最大化最小化按钮
            content: url,
            btn: ['确定', '关闭'],
            yes: function (index, layero) {
                var body = layer.getChildFrame('body', index);
                var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                var inputForm = body.find('#inputForm');
                var top_iframe;
                if (target) {
                    top_iframe = target;//如果指定了iframe，则在改frame中跳转
                } else {
                    top_iframe = '_parent';//获取当前active的tab的iframe
                }
                inputForm.attr("target", top_iframe);//表单提交成功后，从服务器返回的url在当前tab中展示

                if (iframeWin.contentWindow.doSubmit()) {
                    setTimeout(function () {
                        top.layer.close(index);
                    }, 100);//延时0.1秒，对应360 7.1版本bug

                    setTimeout(function () {
                        window.location.reload();
                    }, 200);
                }

            },
            cancel: function (index) {
            }
        });
    }

    //审核功能
    function checkMember(pmId, state) {
        $.post("${ctx}/member/membermgmt/xzgs/checkMember.do", {
            pmId: pmId,
            state: state
        }, function (data) {
            if (data.success == true) {
                util.layerAlertSuccess("操作成功", function () {
                    window.location.reload();
                })
            } else {
                util.layerAlertError("操作失败")
            }
        });
    }



</script>
<script type="text/javascript">
    txz.initHeader({
        nav: [{
            name: '会员管理',
            curr: true
        }],
        info: '<span class="f12">共<b id="totalCount"></b>条记录</span>'
    });
</script>
</body>
</html>